<!--
 * @Author: wangming
 * @Date: 2022-04-26 17:33:31
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-24 15:47:07
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hlTableList/table_item_edit.vue
 * @Description: 
-->
<!--
 * @Author: wangming
 * @Date: 2021-05-29 15:44:34
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-26 17:10:35
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="列编辑" v-show="showtextEdit" class="tr">
      <el-switch v-model="value.textEdit" />
    </el-form-item>
    <el-form-item label="编辑类型" v-if="value.textEdit" class="tr">
      <el-radio-group v-model="value.textEditRoot">
        <el-radio label="serve">服务端</el-radio>
        <el-radio label="web">前端</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="编辑组件" class="tr" v-if="value.textEdit">
      <el-select
        v-model="value.textEditType"
        placeholder="请选择"
        style="width: 160px"
      >
        <el-option
          :label="item.label"
          :value="item.value"
          v-for="(item, index) in editComponents"
          :key="index"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义校验" v-if="value.textEdit" class="item-block">
      <div class="list-item" @click="handleValidate">
        <div class="list-data">export default function { ... }</div>
        <div class="list-actions">
          <el-button type="text">
            <i class="el-icon-edit"></i>
          </el-button>
        </div>
      </div>
    </el-form-item>
    <!-- textEditvalidate -->
    <el-form-item
      label="自定义服务"
      v-if="value.textEditType == 'hmRelation'"
      class="tr"
    >
      <el-switch v-model="value.textEditCustom" />
    </el-form-item>
    <el-form-item
      label="自定义函数"
      v-if="value.textEditCustom && value.textEditType == 'hmRelation'"
      class="item-block"
    >
      <div class="list-item" @click="handleEdit">
        <div class="list-data">export default function { ... }</div>
        <div class="list-actions">
          <el-button type="text">
            <i class="el-icon-edit"></i>
          </el-button>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import CustomFnModal from "../customFnModal";
import basicmixins from "../basicmixins";
import editComponents from "@/pageConfig/elTable/editComponents";
const template = `/**
 * 自定义函数
 * @param {*} row 行数据
 * @param {*} context 上下文
 * @param {*} rootScope 页面公共函数对象
 * @param {*} keyword 查询参数
 * @returns 
 *  Array: [{ label, id }]
 *  Object: {data:[{ label, id }]}
 *  Promise
 */
export default function(row ,context,keyword,rootScope) {
  return []
}
`;
const templateValidate = `/**
 * 自定义校验  具体使用方法同 el-form 
 * 自定义校验 callback 必须被调用。 更多高级用法可参考 async-validator。
 * @param {*} row 行数据
 * @param {*} context 上下文
 * @param {*} value 被校验的值
 * @param {*} callback 校验函数
 * @returns 
 *  Array: [{ label, id }]
 *  Object: {data:[{ label, id }]}
 *  Promise
 */
export default function(row ,context,value,callback) {
  
}
`;
export default {
  data() {
    return {
      editComponents,
    };
  },
  mixins: [basicmixins],
  watch: {
    "value.textEdit": function (v) {
      if (v) {
        this.initType();
      }
    },
  },
  computed: {
    showtextEdit() {
      return this.value.createType !== "SYSTEM" && this.value.type !== "SEQ";
    },
  },
  methods: {
    handleValidate() {
      CustomFnModal.init({
        title: "自定义校验",
        content: this.value.textEditvalidate || templateValidate,
        onConfirm: (data) => {
          this.$set(this.value, "textEditvalidate", data);
        },
      });
    },
    handleEdit() {
      CustomFnModal.init({
        title: "自定义函数",
        content: this.value.textEditCustomServe || template,
        onConfirm: (data) => {
          this.$set(this.value, "textEditCustomServe", data);
        },
      });
    },
    initType() {
      let { textEditType, type } = this.value;
      if (!textEditType) {
        let row = editComponents.find((i) => i.types.indexOf(type) > -1) || {};
        this.value.textEditType = row.value;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f9ff;
  padding: 5px 10px;
  border-radius: 3px;
  line-height: 1.5;

  cursor: pointer;

  &:nth-child(n + 2) {
    margin-top: 8px;
  }
}

.list-data {
  width: 70%;
  word-break: break-all;
}

.item-block {
  ::v-deep .el-form-item__label {
    float: none;
  }
}
</style>
